import React from 'react'
import ReactDOM from 'react-dom'

// const numbers = [1, 2, 3, 4, 5, 6];
// console.log(numbers)
// const lists = numbers.map(number => <li>{ number }</li>)

// ReactDOM.render(
//   <ul>{ lists }</ul>,
//   document.getElementById('root')
// )

// 重构成组件
function NumberLists(props) {
  const numbers = props.numbers;
  const listItem = numbers.map(number => {
    return <li key={number.toString()}>{number}</li>
  });
  return (
    <ul>{ listItem }</ul>
  )
}

const numbers = [1, 2, 3, 4, 5, 6];

ReactDOM.render(
  <NumberLists numbers={ numbers }/>,
  document.getElementById('root')
)